<template>
  <!-- 分页组件 -->
  <el-pagination
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :pager-count="pagerCount"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<script setup lang="ts" name="Pagination">
import { propTypes } from "@/utils/propTypes";

const props = defineProps({
  total: propTypes.number,
  page: propTypes.number.def(1),
  limit: propTypes.number.def(20),
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50, 100]
  },
  pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7)
});
const emit = defineEmits(["update:page", "update:limit", "pagination"]);
const currentPage = computed({
  get() {
    return props.page;
  },
  set(val: any) {
    emit("update:page", val);
  }
});
const pageSize = computed({
  get() {
    return props.limit;
  },
  set(val) {
    emit("update:limit", val);
  }
});
function handleSizeChange(val: number) {
  if (currentPage.value * val > props.total) {
    currentPage.value = 1;
  }
  emit("pagination", { page: currentPage.value, limit: val });
}
function handleCurrentChange(val: number) {
  emit("pagination", { page: val, limit: pageSize.value });
}
</script>
